<div
    class="pm_modal very-important"
    role="dialog"
    ng-class="ctrl.class">
    <div class="modal-dialog">
        <button
            type="button"
            ng-click="ctrl.close()"
            aria-hidden="true"
            title-translate="Close"
            title-translate-context="Action"
            class="fa fa-times close"></button>
        <form
            name="contactImport"
            novalidate
            class="modal-content contactLoaderModal-container"
            ng-class="{
            'contactLoaderModal-imported': ctrl.state === 'imported'
        }">
            <header class="modal-header">
                <h4 class="modal-title">{{ ::ctrl.title }}</h4>
            </header>

            <div class="modal-body">

                <div ng-if="ctrl.state !== 'manageGroups'">
                    <p class="alert alert-info contactLoaderModal-info">{{ ::ctrl.info }}</p>
                    <loader-tag></loader-tag>
                    <progress-bar id="contactsProgressBar"></progress-bar>
                    <label class="contactLoaderModal-label"></label>
                    <div
                        class="contactLoaderModal-success"
                        ng-if="ctrl.success">
                        <p>{{ ctrl.success.complete }}</p>
                        <div class="contactLoaderModal-frame">
                            <h1>{{ctrl.success.count}} of {{ctrl.success.total}}</h1>
                            <strong>{{ctrl.success.text}}</strong>
                        </div>
                    </div>
                    <div
                        class="contactLoaderModal-error"
                        ng-if="ctrl.error.list.length">
                        <p
                            ng-if="ctrl.error.list.length === ctrl.error.total"
                            class="alert alert-danger">{{::ctrl.error.message}}</p>

                        <div ng-if="ctrl.error.list.length !== ctrl.error.total">
                            <p>{{::ctrl.error.message}}</p>
                            <ul class="contactLoaderModal-logs">
                                <li
                                    class="contactLoaderModal-log"
                                    ng-repeat="error in ctrl.error.list track by $id(error)">- {{::error}}</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div
                    ng-if="ctrl.state === 'manageGroups'"
                    class="pm_form">

                    <p
                        class="contactLoaderModal-info"
                        translate-context="Info"
                        translate>We picked up at least one group/organization from the list of contacts you are importing.</p>
                    <p
                        class="contactLoaderModal-info"
                        translate-context="Info"
                        translate>Take the time to review how we should import these groups.</p>

                    <ul class="contactLoaderModal-categories-list">
                        <li
                            class="contactLoaderModal-categories-item"
                            ng-repeat="item in ctrl.categories track by item.id">
                            <div class="contactLoaderModal-categories-label">
                                <strong style="color: {{::item.group.Color}};">
                                    <span class="ellipsis contactLoaderModal-categories-label-text" title="{{ ::item.group.Name }}">{{ ::item.group.Name }}</span>
                                </strong><br>
                                <span>
                                    ({{ ::item.contacts.length }} <span translate translate-n="item.contacts.length" translate-plural="contacts" translate-context="Info">contact</span>)
                                </span>
                            </div>

                            <div class="pm_select contactLoaderModal-categories-actions">
                                <select
                                    class="contactLoaderModal-categories-select"
                                    ng-model="ctrl.model[item.group.ID].action"
                                    ng-options="option.label for option in ctrl.optionsGroup track by option.value"></select>
                                <i class="fa fa-angle-down"></i>
                            </div>

                            <div class="contactLoaderModal-categories-input">
                                <autocomplete-contact-group
                                    ng-if="ctrl.model[item.group.ID].action.value === 2",
                                    data-form="contactImport"
                                    data-model="ctrl.model[item.group.ID].group"
                                    class="contactGroupModal-autocomplete"></autocomplete-contact-group>


                                <label-name-input
                                    class="contactGroupModal-input-label"
                                    ng-if="ctrl.model[item.group.ID].action.value === 1"
                                    data-mode="contactGroup"
                                    data-form="contactImport"
                                    data-model="ctrl.model[item.group.ID]"></label-name-input>

                            </div>
                        </li>
                    </ul>
                </div>
            </div>

            <footer class="modal-footer">
                <button
                    class="pm_button modal-footer-button"
                    ng-click="ctrl.close()"
                    translate-context="Action"
                    translate>Close</button>

                <button
                    class="pm_button modal-footer-button"
                    ng-if="ctrl.state === 'manageGroups'"
                    ng-click="ctrl.save()"
                    ng-disabled="ctrl.pendingImport"
                    translate-context="Action"
                    translate>Save</button>

                <button
                    ng-if="ctrl.state === 'imported' && ctrl.categories.length"
                    class="pm_button modal-footer-button"
                    ng-click="ctrl.toStep('manageGroups')"
                    translate-context="Action"
                    translate>Next</button>
            </footer>
        </form>
    </div>
    <div class="modal-overlay"></div>
</div>
